iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Mobile Development

下班悠哉學 iOS 開發系列 第 26

【Day 26】SwiftUI - Drawing and Animation

  • 分享至 

  • xImage
  •  

Drawing and Animation - Animating Views and Transitions

這邊主要是學 animation(:) 是怎麼使用的。

詳細的教學請移動至官方網站的教學

這邊主要紀錄我覺得比較重要的地方:

在視圖或物件處加上 .animation(.easeInOut) 或  .animation(.spring()),

就會有動畫過度的效果。

上面分別為簡單的兩個效果。另外也可以試試看 .fluid 以及其他的效果。

除了官網之外更為詳細的介紹可以查看下面兩個連結:

Basics of SwiftUI Animation

在 SwiftUI 中設置漸變動畫 (animated gradient) 的 3 個方法

知道大概運作的方式之後,官方的教學就把按鈕與下面動畫的開啟和

關閉透過 withAnimation 綁定在一起。

下面為主要頁面的程式碼。


import SwiftUI

extension AnyTransition {
    static var moveAndFade: AnyTransition {
        let insertion = AnyTransition.move(edge: .trailing)
            .combined(with: .opacity)
        let removal = AnyTransition.scale
            .combined(with: .opacity)
        return .asymmetric(insertion: insertion, removal: removal)
    }
}

struct HikeView: View {
    var hike: Hike
    @State private var showDetail = false

    var body: some View {
        VStack {
            HStack {
                HikeGraph(hike: hike, path: \.elevation)
                    .frame(width: 50, height: 30)
                    .animation(nil)

                VStack(alignment: .leading) {
                    Text(hike.name)
                        .font(.headline)
                    Text(hike.distanceText)
                }

                Spacer()

                Button(action: {
                    withAnimation {
                        self.showDetail.toggle()
                    }
                }) {
                    Image(systemName: "chevron.right.circle")
                        .imageScale(.large)
                        .rotationEffect(.degrees(showDetail ? 90 : 0))
                        .scaleEffect(showDetail ? 1.5 : 1)
                        .padding()
                }
            }

            if showDetail {
                HikeDetail(hike: hike)
                    .transition(.moveAndFade)
            }
        }
    }
}

struct HikeView_Previews: PreviewProvider {
    static var previews: some View {
        VStack {
            HikeView(hike: ModelData().hikes[0])
                .padding()
            Spacer()
        }
    }
}

https://ithelp.ithome.com.tw/upload/images/20211011/20092056ebofOH6sUw.png

連我都覺得這篇寫得很隨便 呵呵.


上一篇
【Day 25】SwiftUI -Drawing Paths and Shapes
下一篇
【Day27】 在 Swift 中去呼叫 C/C++ 程式碼
系列文
下班悠哉學 iOS 開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言